import React from 'react'
import {
    Form,
    Input,
    Button,
    Dialog,
    TextArea,
    DatePicker,
    Selector,
    Slider,
    Stepper,
  } from 'antd-mobile'
function index() {
    const onFinish = (values: any) => {
        Dialog.alert({
          content: JSON.stringify(values),
        })
      }
    return (
        <div className='box'>
            <header><h1>报名工具</h1></header>
            
          <Form
          onFinish={onFinish}
          footer={
            <Button block type='submit' color='primary'>
              提交
            </Button>
          }
        >
            <Form.Item
            name='姓名'
            label='姓名'
            rules={[{ required: true, message: '姓名不能为空' }]}
          >
            <Input placeholder='请输入姓名' />
          </Form.Item>
          <Form.Item name='address' label='地址'>
            <Input placeholder='请输入地址' />
          </Form.Item>
          <Form.Item name='favoriteFruits' label='喜爱的水果'>
            <Selector
              columns={3}
              multiple
              options={[
                { label: '苹果', value: 'apple' },
                { label: '橘子', value: 'orange' },
                { label: '香蕉', value: 'banana' },
              ]}
            />
          </Form.Item>
        </Form>
        </div>
    )
}

export default index
